import {messages} from "share/common";
/**
 * Created by Allen on 2018/3/5.
 */
import React from 'react'
import { connect } from 'react-redux'
import menuRoute from 'routes/menuRoute'
import { Col, Row, Icon, Card, Collapse, Button, Modal, message } from 'antd'
import 'styles/supplier-management/overview/supplier-dashboard.scss'
import supplierManagementService from 'containers/supplier-management/overview/supplier-management.service'
import ListSort from 'components/list-sort'
const Panel = Collapse.Panel;

class supplierDashboard extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      vendorInfo: {
        openVendorsFailNumber: 0,
        openVendorsNumber: 0
      },
      openVendorsList: [],
      notOpenVendorsList: [],
      supplierSorting: false,
      modalVisible: false,
      supplierDetail: menuRoute.getRouteItem('supplier-detail','key'),
      enableService: menuRoute.getRouteItem('enable-service','key'),
      subApplicationPage: menuRoute.getRouteItem('sub-application','key'),    //子应用管理的页面项
    };
  }

  componentWillMount(){
    supplierManagementService.getVendorInfo().then((resp) => {
      if (resp.status === 200){
        this.setState({
          vendorInfo: resp.data.body,
          openVendorsList: resp.data.body.openVendorsList,
          notOpenVendorsList: resp.data.body.notOpenVendorsList})
      }
    }).catch(error => message.error(messages('common.error')))
  }

  handleOk = () => {
    this.setState({
      modalVisible: false,
      openVendorsList: this.state.sortArray,
    })
  };

  hideModal = () =>{
    this.setState({modalVisible: false})
  };

  handleSortSupplier = (result) => {
    let sortArray = [];
    result.map((item,index) => {
      sortArray.push(item.ref);
    });
    this.setState({sortArray: sortArray});
  };

  //进入已开通的供应商控制台
  handleToControl = (item) => {
    this.context.router.push(this.state.supplierDetail.url.replace(':supplierName',item.vendorsId),item.vendorsId)
  };

  //开通未开启的供应商
  handleToEnable = (item) => {
    let path = this.state.enableService.url.replace(':supplierName', item.vendorsId).replace(':supplierChinaName', item.cnVendorsName);
    this.context.router.push(path, item.vendorsId)
  };

  renderOpenVendorsList = () => {
    const { openVendorsList } = this.state;
    return openVendorsList.map((item,index) => (
      <Col xs={8} sm={8} md={8} lg={8} xl={8} xxl={6} className="card-style" key={item.id}>
        <Card style={{width: '100%', height: '100%'}}>
          <div className="supplier-name">{item.cnVendorsName}</div>
          <div className="icon">
            <img src={item.imgUrl} alt=""/>
            <div className="hover-content">
              <div className="hover-icon">
                {item.enVendorsProfile && <img src={item.enVendorsProfile[0]} alt=""/>}
              </div>
              {item.enVendorsProfile && <div className="hover-text">{item.enVendorsProfile[1]}</div>}
              {item.enVendorsProfile && <div className="hover-text">{item.enVendorsProfile[2]}</div>}
              {item.enVendorsProfile && <div className="hover-text">{item.enVendorsProfile[3]}</div>}
              {item.enVendorsProfile && <div className="hover-text">{item.enVendorsProfile[4]}</div>}
              <div className="hover-button" onClick={() => this.handleToControl(item)}>{messages('supplier.key86'/*进入控制台*/)}</div>
            </div>
          </div>
          <div className="little-tips">
            {item.vendorsLabel && item.vendorsLabel.map((item,index) => (
            <span className="tips-item" key={index}>{item}</span>
            ))}
          </div>
        </Card>
      </Col>
    ))
  };

  renderNotopenVendorsList = () =>{
    const { notOpenVendorsList } = this.state;

    return notOpenVendorsList.map((item,index) => (
      <Col xs={8} sm={8} md={8} lg={8} xl={8} xxl={6} className="card-style" key={item.id}>
        <Card>
          <div className="supplier-name">{item.cnVendorsName}</div>
          <div className="icon">
            <img src={item.imgUrl} alt=""/>
            <div className="hover-content">
              <div className="hover-icon">
                <img src={item.enVendorsProfile ? item.enVendorsProfile[0] : ''} alt=""/>
              </div>
              <div className="hover-text no-open-hover-text">{item.enVendorsProfile ? item.enVendorsProfile[1]: ''}</div>
              <div className="hover-button" onClick={() => this.handleToEnable(item)}>
                {messages('supplier.key87'/*立即开通*/)}</div>
            </div>
          </div>
          <div className="little-tips">
            {item.vendorsLabel && item.vendorsLabel.map((item,index) => (
              <span className="tips-item" key={index}>{item}</span>
            ))}
          </div>
        </Card>
      </Col>
    ))
  };

  render(){
    const { vendorInfo, openVendorsList, notOpenVendorsList, modalVisible } = this.state;

    return (
      <div className="supplier-dashboard">
        <Card style={{height: '110px', marginBottom: 20}}>
          <div className="dashboard-head">
            <Icon type="search" style={{fontSize: '50px', color: '#61A8E8'}}/>
            <div className="supplier-content">
              <div className="content">{messages('supplier.key88'/*启用供应商数量*/)}</div>
              <div className="number">{vendorInfo.openVendorsNumber}</div>
            </div>
            <span className="ant-divider"/>
            <div className="supplier-title">{messages('supplier.key90'/*热门供应商*/)}</div>
          </div>
        </Card>
        <div className="has-opened supprowKeyliers">
          <div className="has-opened-title" style={{display: 'inline-block', marginRight: 15}}>
            {messages('supplier.key91'/*已开启*/)}
          </div>
          <Button className="sort-button" onClick={() => this.setState({modalVisible: true})} style={{float: 'right'}}>
            {messages('supplier.key92'/*排序*/)}
          </Button>
          {
            openVendorsList.length > 0 ?
              <div style={{color: '#999999', fontSize: 15, display: 'inline-block'}}> {messages('supplier.key182')/*请确保在将以下应用【添加】至【APP应用管理-商务出行】的使用列表，否则用户将无法在APP中看到此应用*/}
              </div>
              : null
          }
          {openVendorsList.length === 0 ? (
          <div className="no-openVendor-content">
            <div className="title">
              {messages('supplier.key93'/*没有已启用的供应商服务*/)}
            </div>
            <div className="tip">
              {messages('supplier.key94'/*可在下方选择需要的供应商服务，按照指引进行开通*/)}
            </div>
          </div>
          ) : (
            <div>
              <div className="supplier-items">
                <Row gutter={{ xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 48}} className="supplier-row">
                  {this.renderOpenVendorsList()}
                </Row>
              </div>
              <div className='parent-contain'></div>
              <Modal title={messages('supplier.key95'/*请选择已开通供应商排序*/)}
                     visible={modalVisible}
                     onOk={this.handleOk}
                     onCancel={this.hideModal}
                     getContainer={() => document.getElementsByClassName('parent-contain')[0]}
                     okText={messages('common.save')/*保存(*/}>
                <div style={{cursor: 'move', position: 'relative'}}>
                  <ListSort
                    onChange={this.handleSortSupplier}
                    dragClassName="list-drag-selected"
                  >
                    {openVendorsList ? openVendorsList.map((item,index) => (
                        <div className="supplier-modal-name" key={item.id} ref={item}>
                          {item.cnVendorsName}
                        </div>
                      )
                    ) : null}
                  </ListSort>
                </div>
              </Modal>
            </div>
          )}
        </div>

        <div className="has-opened suppliers">
          <div className="has-opened-title" style={{display: 'inline-block', marginRight: 15}}>
            {messages('supplier.key96'/*未开启*/)}
          </div>
          {
            notOpenVendorsList.length > 0 ?
              <div style={{color: '#999999', fontSize: 15, display: 'inline-block'}}>
                {messages('supplier.key194')/*请确保在将以下应用从【 APP应用管理-商务出行】中移除，否则用户仍能在APP中看到此应用却无法使用*/}
              </div>
              : null
          }
          {notOpenVendorsList.length === 0 ? (
          <div className="no-notOpenVendor-content">
            <div className="title">
              {messages('supplier.key97'/*没有未启用的供应商服务*/)}
            </div>
          </div>
          ) : (
            <div className="supplier-items">
              <Row gutter={{ xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 48}} className="supplier-row">
                {this.renderNotopenVendorsList()}
              </Row>
            </div>
          )}
        </div>
      </div>
    )
  }
}

supplierDashboard.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    company: state.login.company
  }
}

export default connect(mapStateToProps)(supplierDashboard);
